/*
 * @Description: 扣款顺序支付信息
 * @Author: tao.xie
 * @Date: 2019-03-26 16:27:08
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-04-02 15:23:24
 */
<template>
  <div class="wrapper flex-h flex-vc flex-hsb">
    <!-- 左边的空白，禁止点击冒泡 -->
    <span @touchstart.stop="_stop"></span>
    <div
      class="content-wrapper  flex-h flex-hsb"
      :class="addBorder?'xb_border eee':''"
    >
      <!-- 银行卡信息，不支持的支付方式禁止点击冒泡 -->
      <div
        class="content-left-wrapper flex-v flex-hc flex-vs"
        :class="!isSupport?'flex1':''"
        @touchstart.stop="_stop"
      >
        <span>{{cardName}}</span>
        <!-- 不支持的支付方式文案 -->
        <span v-if="!isSupport">{{errMsg}}</span>
      </div>
      <!-- 卡号或者余额信息信息，禁止冒泡点击 -->
      <span
        v-if="isSupport"
        @touchstart.stop="_stop"
        class="flex1"
      >{{cardShortNo}}</span>
      <!-- 拖动换顺序的图标，不禁止冒泡点击 -->
      <i class="icon iconfont icon-CombinedShape- "></i>
    </div>
    <span></span>
  </div>
</template>

<script>
import { getWalletBalance } from '../api/api.js'
export default {
  props: {
    paymentInfo: {
      type: Object,
      required: true,
      defualt: () => {
        return {}
      }
    },
    addBorder: {
      type: Boolean,
      required: true,
      default: true
    },
    showBalance: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  watch: {
    paymentInfo() {
      this.refresh()
    }

  },
  data() {
    return {
      cardName: '',
      cardShortNo: '',
      isSupport: true,
      errMsg: ''
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    _stop: function () {

    },
    _getWalletBalance: async function () {
      try {
        let rs = await getWalletBalance()
        this.cardShortNo = '(' + rs.BALANCE + ')'
      } catch (err) {

      }
    },
    refresh() {
      this.cardName = this.paymentInfo.paymentName
      this.isSupport = this.paymentInfo.isSupport

      this.errMsg = this.isSupport ? '' : '(本卡暂不支持此支付方式)'

      if (this.paymentInfo.payment === 'BINDCARD_PAY') {
        // 绑卡付
        this.cardShortNo = '(' + this.paymentInfo.bankCardShortNo + ')'
      } else {
        // 余额付，当支持的时候去请求余额，否则显示该卡不支持该支付方式
        if (this.isSupport && this.$props.showBalance) {
          this._getWalletBalance()
        }
      }
    }
  }
}
</script>

<style>
/* 总的包裹层 */
.wrapper {
  width: 750px;
  height: 120px;
}
/* 左边的空白区域 */
.wrapper > span:first-of-type {
  width: 30px;
  height: 120px;
}
/* 右边的空白区域 */
.wrapper > span:nth-of-type(2) {
  width: 30px;
  height: 120px;
}
/* 中间的内容包裹层 */
.content-wrapper {
  width: 690px;
  height: 120px;
}
/*卡名称和卡不支持的包裹层*/
.content-left-wrapper {
  height: 120px;
}

/*银行卡名称，最多一行显示*/
.content-left-wrapper > span:first-of-type {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  max-width: 540px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
/* 暂不支持该支付方式的文案 */
.content-left-wrapper > span:nth-of-type(2) {
  color: #999;
  font-size: 12px; /*no*/
  line-height: 16px; /*no*/
}

/*卡号及余额*/
.content-wrapper > span:first-of-type {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 120px;
  height: 120px;
  text-align: left;
}
/* 拖动的图标 */
.content-wrapper > i:first-of-type {
  height: 120px;
  text-align: center;
  line-height: 120px;
  padding-left: 30px;
}
</style>
